<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <div class="content">
      <div class="header">

        <ul class="headerTitle clearfix">

          <li class="li_lb">
            <p>类别</p>
          </li>

          <li class="li_rb">
            <p class="liText">
              <el-button type="warning">日报</el-button>
            </p>
          </li>

          <li class="li_yb">
            <p class="liText">
              <el-button type="warning">月报</el-button>
            </p>
          </li>

          <li class="li_nb">
            <p class="liText">
              <el-button type="warning">年报</el-button>
            </p>
          </li>

          <li class="li_cx">
            <p class="liText">
              <el-button type="warning">查询</el-button>
            </p>
          </li>


          <li class="li_tb">
            <p class="liText">
              <el-button type="warning">图表</el-button>
            </p>
          </li>

          <li class="li_dc">
            <p class="liText">
              <el-button type="warning">导出表格</el-button>
            </p>
          </li>

        </ul>


      </div>


      <div class="clearfix main">
        <div class="list">
          <p class="list_title">
            <router-link to="path"> 综合报表</router-link>
          </p>

          <h3 class="list_titleItem_Title">
            <router-link to="">房源统计报表</router-link>
          </h3>

          <ul>
            <li class="list_item_Li">
              <p>
                <router-link to="path">出售客房</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path">出租客房</router-link>
              </p>
            </li>
          </ul>


          <h3 class="list_titleItem_Title">
            <router-link to="path"> 客源统计报表</router-link>
          </h3>

          <ul>
            <li class="list_item_Li">
              <p>
                <router-link to="path">求购客源</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 求租客源</router-link>
              </p>
            </li>
          </ul>


          <h3 class="list_titleItem_Title">
            <router-link to="path">带看统计报表</router-link>
          </h3>

          <ul>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 新盘带看</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 二手房带看</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path">租房带看</router-link>
              </p>
            </li>
          </ul>


          <h3 class="list_titleItem_Title">
            <router-link to="path">成交统计报表</router-link>
          </h3>

          <ul>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 新房成交</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path">二手房成交</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path">租房成交</router-link>
              </p>
            </li>
          </ul>


          <h3 class="list_titleItem_Title">
            <router-link to="path"> 业绩统计报表</router-link>
          </h3>

          <ul>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 新房业绩</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path"> 二手房业绩</router-link>
              </p>
            </li>
            <li class="list_item_Li">
              <p>
                <router-link to="path">租房业绩</router-link>
              </p>
            </li>
          </ul>


        </div>


        <!-- 表格 -->
        <div class="content_Table">


          <table border="1px" cellspacing="0px" cellpadding="0px" class="table">
            <tr>
              <th colspan=6>客房统计</th>

            </tr>
            <tr>
              <td>区域</td>
              <td>门店</td>
              <td>组别</td>
              <td>经纪人</td>
              <td>二手房源</td>
              <td>租房源</td>

            </tr>

            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>


            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>


            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>


            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>

        </div>

      </div>

      <!-- footer -->
      <footers></footers>
      <!-- footer end-->
    </div>
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';

  export default {
    name: 'Ktask',
    components: {
      heads,
      footers
    },
    data() {
      return {

      };
    }

  };
</script>

<style scoped>
  /* 通用样式 */
  *,
  ::before,
  ::after {
    font-size: 14px;

    /*  */
    margin: 0;
    padding: 0;

    /* 点击高亮效果 *//* 手指点击 清除默认的 高亮效果 透明 */
    -webkit-tap-highlight-color: transparent;

    /* 盒子模型 */
    /* 样式输入完毕 在后面tab */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* 统一设置文字  sans-serif 移动端 的默认字体 */
    font-family: 'Microsoft YaHei', sans-serif;
  }

  .header {
    width: 100%;
    height: 70px;
    margin-top: 84px;
    border: 5px solid #ED7C30;
  }

  .clearfix::before,
  .clearfix::after {
    content: '';
    display: block;
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
  }

  .headerTitle li {
    list-style: none;
    float: left;
    height: 100%;
    height: 60px;
  }

  .li_lb {
    display: block;
    width: 190px;
    border-right: 5px solid #ED7C30;
  }

  .li_lb p {
    line-height: 53px;
    margin-top: 3px;
    background-color: #ED7C30;
    text-align: center;
  }

  .li_rb {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;

  }

  .li_yb {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;
  }

  .li_nb {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;
  }

  .li_cx {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;
  }

  .liText {
    height: 42px;
    text-align: center;
    border: 1px solid #555;
    background-color: #e6a23c;
    border-radius: 10px;
    line-height: 40px;
  }

  .li_tb {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;
  }

  .li_dc {
    margin-left: 8%;
    width: 100px;
    padding-top: 6px;
  }

  .list {
    width: 195px;
    border: 5px solid #ED7C30;
    padding-bottom: 258px;
  }

  .list_title {
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
  }

  .list_titleItem_Title {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
  }

  .list_item_Li {
    margin-top: 3px;
    text-align: center;
  }

  .main {
    position: relative;
  }

  .content_Table {
    width: 89.8%;
    float: right;
    position: absolute;
    top: 0px;
    margin-left: 195px;
  }

  .content_Table table {
    width: 100%;
    text-align: center;

  }

  .content_Table table td {
    height: 20px;
  }


</style>
